<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

<div id="container" style="height: 100%"></div>

<script type="text/javascript" src="../echarts.js"></script>
<script src="../../js/axios.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
-->
<script>
    // 发起HTTP GET请求获取工程师信息
    axios.get('http://localhost:8080/engineer/getMyInfo', {
        withCredentials: true
    }).then(function(res) {
        // 获取返回的工程师信息数据
        originalData = res.data.data;
        var engId = originalData.engineerId;
        console.log(originalData.engineerId);

        // 发起HTTP GET请求获取订单数量信息
        axios.get('http://localhost:8080/order/getOrderCount/' + engId, {
            withCredentials: true
        }).then(function(res) {
            // 获取返回的订单数量数据
            originalData = res.data.data;
            console.log(originalData);

            // 提取各订单状态数量
            var count1 = originalData.status1Orders; 
            // 已接单数量
            var count2 = originalData.status2Orders; 
            // 待审核数量
            var count3 = originalData.status3Orders; 
            // 已完结数量
            var count4 = originalData.status4Orders;
             // 订单被退回数量

            // 获取容器元素和初始化图表
            var dom = document.getElementById('container');
            var myChart = echarts.init(dom, null, {
                renderer: 'canvas',
                useDirtyRect: false
            });

            // 设置图表的配置项和数据
            var option = {
                title: {
                    text: '订单状态统计', 
                    // 图表标题
                    left: 'center' 
                    // 标题居中对齐
                },
                tooltip: {
                    trigger: 'item' 
                    // 鼠标悬停提示信息触发方式为数据项触发
                },
                series: [
                    {
                        name: '订单状态', 
                        // 系列名称
                        type: 'pie', 
                        // 图表类型为饼图
                        radius: '50%', 
                        // 饼图半径大小
                        data: [
                            { value: count1, name: '已接单' }, 
                            // 已接单数据项
                            { value: count2, name: '待审核' },
                             // 待审核数据项
                            { value: count3, name: '已完结' },
                             // 已完结数据项
                            { value: count4, name: '订单被退回' },
                             // 订单被退回数据项
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10, 
                                // 数据项阴影模糊度
                                shadowOffsetX: 0,
                                 // 数据项阴影X轴偏移量
                                shadowColor: 'rgba(0, 0, 0, 0.5)' 
                                // 数据项阴影颜色
                            }
                        }
                    }
                ]
            };

            // 判断配置项是否存在并设置图表的配置项
            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }

            // 监听窗口大小变化，自适应图表大小
            window.addEventListener('resize', myChart.resize);
        })
    }).catch(function(error) {
        // 打印错误信息和文档中的Cookie
        console.log(document.cookie)
        // 请求失败的处理逻辑
        console.error(error);
    });
</script>
</body>
</html>
